<template>
	<view class="">
		<u-navbar :is-back="true" title="学员详情" back-icon-color="#ffffff" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="listcents">
			<view class="topsads">
				<view class="toptitle fliexs space_between">
					<span class="names" v-if="objtDetail">{{objtDetail.name}} <span class="cardtitle">其他</span></span>
					<span class="topdate colors" @click="topages"><u-icon name="edit-pen-fill" size="28"
							color="#606266"></u-icon> 修改</span>
				</view>
				<view class="list_btns colors">
					<div class="lisntcenter fliexs">
						<u-icon name="phone" size="28" color="#606266"></u-icon> <span
							style="padding-left: 10rpx;"  v-if="objtDetail">{{objtDetail.phone}}</span>
					</div>
					<div class="lisntcenter fliexs" v-if="objtDetail">
						<u-icon name="calendar" size="28"></u-icon> <span style="padding-left: 10rpx;" v-if="objtDetail.classInfo">{{objtDetail.classInfo.name || ''}}</span>
					</div>
				</view>
			</view>
			<view class="" style="height: 4rpx;background-color: #f2f2f2;"></view>
			<view class="">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"
					active-color="#E62131"></u-tabs>
			</view>
			<view class="titles" v-if="current == 0 && objtDetail">
				共在读{{objtDetail.studentCourse.length}}个课程
			</view>
			<view class="titles" v-if="current == 1 && objtDetail" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="width: 60%;">
					<span @click="isckickTime(1)">{{form.sTime}} <u-icon name="arrow-down-fill" size="28"
							style="margin-left: 10rpx;"></u-icon></span> <span style="padding: 0 40rpx;">至</span> <span
						@click="isckickTime(2)">{{form.eTime}} <u-icon name="arrow-down-fill" size="28"
							style="margin-left: 10rpx;"></u-icon></span>
				</view>
				<view class="" >
					<u-button :plain="true" type="error" size='mini' style="margin-left: 20rpx;" @click="clickBtns">搜索</u-button>
					<u-button :plain="true" size='mini' style="margin-left: 20rpx;" @click="resctads">重置</u-button>
				</view>
			</view>
			<view class="titles" v-if="current == 1">
				共{{allcount}}次课，已消耗{{afterNum}}课时/{{afterAmount}}元
			</view>
		</view>
		<view class="scrsas" v-if="current == 0 && objtDetail" >
			<view class="listkecheng" v-for="(item,index) in objtDetail.studentCourse" :key="index">
				<view class="listtitle">
					{{item.courseName}} <span class="minicard bg1">正常</span> <span class="minicard bg2">已付款</span>
				</view>
				<view class="centesr">
					剩余{{item.residueNum}}课时
				</view>
				<view class="btnliats">
					<span>购买{{item.courseNum}}课时 共{{item.amount}}元</span> <span>{{item.createDate}}签单</span>
				</view>
			</view>
		</view>
		<view class="scrsas" v-if="current == 0 && objtDetail" :style="'height:'+heightad+'px;'">
			<view class="listkecheng" v-if="objtDetail.listClassInfo">
				<view class="zaidu" @click="clickFlics">
					在读班级（<span>{{objtDetail.listClassInfo.length}}</span>）<u-icon name="arrow-down-fill" size="28" color="#E62131" v-if="!allflag"></u-icon><u-icon name="arrow-up-fill" size="28" color="#E62131" v-if="allflag"></u-icon>
				</view>
				<view class="" v-if="allflag">
					<view class="lsiads"  v-for="(itm,idx) in objtDetail.listClassInfo" :key="idx">
						<view class="listbnts" v-if="itm.classInfo">
							{{itm.classInfo.name}} <span style="padding-left: 20rpx;">已上{{itm.afterNum}}次课</span>
						</view>
						<view class="">
							首课:{{itm.fisrtTime}} <span style="padding-left: 20rpx;">结课: {{itm.endTime?itm.endTime:'-'}}</span>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="scrsas" v-if="current == 1 && classList" :style="'height:'+heightad+'px;'">
			<view class="lsitreat" v-for="(item,index) in classList" :key="index" @click="listAdtops(item)">
				<view class="toptitle fliexs">
					<span class="bans">班</span>
					<span class="names">{{item.classYear}}-{{item.classDate}} {{item.classStartTime}}-{{item.classEndTime}} <span class="cardtitle">{{item.isAttendance==0?'未上课':'已上课'}}</span> </span>
				</view>
				<view class="list_btns colors">
					<div class="lisntcenter fliexs">
						<u-icon name="calendar" size="28"></u-icon> <span style="padding-left: 10rpx;">{{item.courseInfo.name}} {{item.coachName}}</span>
					</div>
					<div class="lisntcenter fliexs">
						<u-icon name="order" size="28"></u-icon> <span style="padding-left: 10rpx;">{{item.workOut.classHours}}课时 {{item.courseInfo.standard}}元</span>
					</div>
				</view>
			</view>
		</view>
		<view class="scrsas" v-if="current == 2" :style="'height:'+heightad+'px;'">
			<view class="datetext">
				<div class="listad"><span class="nameads">学员姓名</span> <span>{{objtDetail.name}}</span></div>
				<div class="listad"><span class="nameads">学员班级</span> <span>{{objtDetail.classInfo?objtDetail.classInfo.courseName:''}}</span></div>
				<div class="listad"><span class="nameads">学员校区</span> <span>{{objtDetail.campusName}}</span></div>
				<div class="listad"><span class="nameads">学员性别</span> <span>{{objtDetail.sex==1?'女':'男'}}</span></div>
				<div class="listad"><span class="nameads">学员电话</span> <span>{{objtDetail.phone}}</span></div>
				<div class="listad"><span class="nameads">学员备注</span> <span>{{objtDetail.remarks}}</span></div>
			</view>
		</view>
		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate"
			confirm-color="#E62131"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '报读课程'
				}, {
					name: '上课记录'
				}, {
					name: '详细资料'
				}],
				current: 0,
				form: {
					sTime: '请选择',
					eTime: '请选择',
				},
				dateindex: 1,
				showdate: false,
				dateparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				heightad: 0,
				id:"",
				objtDetail:null,
				allflag:false,
				params:{
					id:"",
					openEndTime:"",
					openStartTime:"",
					limit:10000,
					page:1,
				},
				classList:[],
				afterNum:0,
				afterAmount:0,
				allcount:0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.params.id = this.id
		},
		onShow() {
			this.studentinfoDetailApi()
		},
		onReachBottom() {
			this.params.page += 1
			this.studentworkRecordApi()
		},
		methods: {
			clickFlics(){
				this.allflag = !this.allflag
			},
			resctads(){
				this.form.sTime = "请选择";
				this.params.openStartTime = "";
				this.form.eTime = "请选择";
				this.params.openEndTime = "";
				this.clickBtns()
			},
			clickBtns(){
				this.classList = [];
				this.params.page = 1
				this.studentworkRecordApi()
			},
			
			studentinfoDetailApi(){
				
				uni.$api.common.studentinfoDetail(this.id).then((res) => {
					this.objtDetail = res.result
					this.studentworkRecordApi()
					this.isheight()
				});
			},
			studentworkRecordApi(){
				uni.$api.common.studentworkRecord(this.params).then((res) => {
					res.result.pageList.result.forEach((item)=>{
						this.classList.push(item)
					})
					this.allcount = res.result.pageList.count
					this.afterNum = res.result.afterNum
					this.afterAmount = res.result.afterAmount
					
				});
			},
			change(index) {
				this.current = index;
			},
			topages() {
				let form= {
					name: this.objtDetail.name,
					phone: this.objtDetail.phone,
					campusId: this.objtDetail.campusId,
					remarks: this.objtDetail.remarks,
					id: this.objtDetail.id,
				};
				uni.navigateTo({
					url: "./studentAdd?form=" + JSON.stringify(form)
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 1) {
					this.form.sTime = e.year + '-' + e.month + '-' + e.day;
					this.params.openStartTime = e.year + '-' + e.month + '-' + e.day;
				}
				if (this.dateindex == 2) {
					this.form.eTime = e.year + '-' + e.month + '-' + e.day
					this.params.openEndTime = e.year + '-' + e.month + '-' + e.day;
				}
			},
			isheight() {
				setTimeout(()=>{
					uni.getSystemInfo({
						success: (e) => {
							// this.compareVersion(e.SDKVersion, '2.5.0')
							let statusBar = 0
							let customBar = 0
					
					
							// #ifdef MP
							statusBar = e.statusBarHeight
							customBar = e.statusBarHeight + 45
							if (e.platform === 'android') {
								// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
								customBar = e.statusBarHeight + 50
							}
							// #endif
					
					
							// #ifdef MP-WEIXIN
							statusBar = e.statusBarHeight
							// @ts-ignore
							const custom = wx.getMenuButtonBoundingClientRect()
							customBar = custom.bottom + custom.top - e.statusBarHeight
							// #endif
					
					
							// #ifdef MP-ALIPAY
							statusBar = e.statusBarHeight
							customBar = e.statusBarHeight + e.titleBarHeight
							// #endif
					
					
							// #ifdef APP-PLUS
							console.log('app-plus', e)
							statusBar = e.statusBarHeight
							customBar = e.statusBarHeight + 45
							// #endif
					
					
							// #ifdef H5
							statusBar = 0
							customBar = e.statusBarHeight + 45
							// #endif
					
							// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
							console.log(statusBar, customBar, e)
							const query = uni.createSelectorQuery().in(this);
							let that = this;
							query
								.select('.listcents')
								.boundingClientRect(data => {
									console.log(e.screenHeight - data.height - customBar)
									that.heightad = e.screenHeight - data.height - customBar - 60; 
								})
								.exec();
							
						}
					})
				},1000)
			},
		},
		
	}
</script>

<style lang="scss">
	.scrsas{
		overflow-y: scroll;
	}
	.topsads {
		padding: 30rpx;

		.toptitle {
			.names {
				font-weight: bold;

				.cardtitle {
					display: inline-block;
					padding: 2rpx 6rpx;
					background-color: #f2f2f2;
					border-radius: 5rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #606266;
				}
			}
		}

		.lisntcenter {
			margin-top: 10rpx;
		}
	}

	.titles {
		padding: 30rpx;
	}

	.listkecheng {
		padding: 30rpx;
		padding-top: 0;

		.listtitle {
			font-weight: bold;
			font-size: 26rpx;

			.minicard {
				display: inline-block;
				padding: 1rpx 5rpx;
				border: 1rpx solid #f2f2f2;
				border-radius: 6rpx;
				margin-left: 20rpx;
				font-size: 22rpx;
			}

			.bg1 {
				border-color: #E62131;
				color: #E62131;
			}

			.bg2 {
				border-color: #19be6b;
				color: #19be6b;
			}
		}

		.centesr {
			line-height: 40rpx;
			color: #606266;
		}

		.btnliats {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f2f2f2;
			padding-bottom: 20rpx;
		}
		.zaidu{
			color: #E62131;
			padding: 20rpx 0;
		}
		.lsiads{
			border-bottom: 1rpx solid #f2f2f2;
			padding-bottom: 20rpx;
		}
	}

	.lsitreat {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f2f2f2;

		.toptitle {
			.bans {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 22rpx;
				text-align: center;
				background-color: #E62131;
				color: #ffffff;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			.names {
				font-weight: bold;

				.cardtitle {
					display: inline-block;
					padding: 2rpx 6rpx;
					// background-color: #f2f2f2;
					border: 1rpx solid #E62131;
					border-radius: 5rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #E62131;
				}
			}
		}

		.tiext_center {
			width: 100%;
			margin: 10rpx 0;
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
		}

		.lisntcenter {
			margin-top: 10rpx;
		}
	}
	.datetext{
		padding: 30rpx;
		.listad{
			display: flex;
			align-items: center;
			line-height: 60rpx;
			color: #000000;
			.nameads{
				padding-right: 20rpx;
				color: #606266;
			}
		}
	}
</style>